<template>
  <div class="comp-global-tabbar">
    <van-tabbar>
      <van-tabbar-item :to="{name:'homeIndex'}">
        <template slot="icon"><img src="../assets/imgs/vblvti/1.png" /></template>
        首页
      </van-tabbar-item>
      <van-tabbar-item @click="onClickShowPopup">
        <template slot="icon"><img src="../assets/imgs/vblvti/2.png" /></template>
        刷单专区
      </van-tabbar-item>
      <van-tabbar-item :to="{name:'shopIndex'}">
        <template slot="icon"><img src="../assets/imgs/vblvti/3.png" /></template>
        商城
      </van-tabbar-item>
      <van-tabbar-item :to="{name:'userIndex'}">
        <template slot="icon"><img src="../assets/imgs/vblvti/4.png" /></template>
        我的
      </van-tabbar-item>
    </van-tabbar>

    <van-popup class="comp-global-tabbar-popup" v-model="isShowPopup" position="bottom">
      <van-badge-group :active-key="10">
        <van-badge url="#/mutually/buy" title="我要刷单"/>
        <van-badge url="#/mutually/sell" title="我要提现"/>
        <van-badge url="#/mutually/buy/record" title="刷单记录"/>
        <van-badge url="#/mutually/sell/record" title="提现记录"/>
      </van-badge-group>
    </van-popup>
  </div>
</template>

<script>
  import { Badge, BadgeGroup, Popup, Tabbar, TabbarItem } from 'vant';

  export default {
    name: 'global-tabbar',
    components: {
      [Badge.name]: Badge,
      [BadgeGroup.name]: BadgeGroup,
      [Popup.name]: Popup,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem
    },
    data() {
      return {
        isShowPopup: false
      };
    },
    methods: {
      onClickShowPopup() {
        this.isShowPopup = true;
      }
    }
  }
</script>

<style>
  .comp-global-tabbar-popup {
    width: auto;
    left: 38%;
    bottom: 50px;
  }
  .comp-global-tabbar-popup .van-badge {
    text-align: center;
    padding: 8px;
  }
  .comp-global-tabbar .van-modal {
    background-color: transparent;
  }
</style>